<template>
  <div class="search-suggestion">
    <van-cell
      icon="search"
      v-for="(text, index) in suggestios"
      :key="index"
      @click="$emit('search', text)"
    >
      <div slot="title" v-html="htmlStr(text)"></div>
    </van-cell>
  </div>
</template>

<script>
import { debounce } from 'lodash' // loadsh 防抖按需导入
export default {
  components: {},
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      suggestios: [] // 联想建议数据列表
    }
  },
  watch: {
    searchText: {
      // 当 search-text 发生变化,会调用 handler 函数
      /*
      debounce 是一个函数
      第一个参数是要防抖的函数
      第二个参数是计时器时间
       */
      handler: debounce(function (val) {
        this.loadSearchSuggestion(val)
      }, 500),
      immediate: true // 一上来触发一次
    }
  },
  created() {},
  mounted() {},
  methods: {
    async loadSearchSuggestion(q) {
      try {
        const { data: res } = await this.$api.getSearchSuggestion(q)
        this.suggestios = res.data.options
      } catch (err) {
        console.log('获取联想建议失败')
      }
    },
    htmlStr(val) {
      const heightStr = `<span class="active">${this.searchText}</span>`
      /*
      构造函数创建一个正则表达式
      参数可以使用模板字符串,可以解析变量
      第二个参数是匹配模式要写在字符串中 i 忽略大小写 g 匹配全局
      */
      const reg = new RegExp(this.searchText, 'ig')
      return val.replace(reg, heightStr)
    }
  },
  filters: {}
}
</script>

<style lang="less" scoped>
.search-suggestion {
  /deep/ span.active {
    color: #3296fa !important;
  }
}
</style>
